<template>
	<div class="booklist">
		<div class="banner">
			 <el-carousel :interval="5000" arrow="nerver" height="10rem">
		        <el-carousel-item v-for="item in HotBanner" :key="item.id">
		          <img  :src="`${$ip}/api/public/showimg/${item.picture}`" />
		        </el-carousel-item>
		      </el-carousel>
		</div>
		<MobileBooksGit></MobileBooksGit>
	</div>
</template>

<script>
	import MobileBooksGit from '@/components/mobile/bookslist/MobileBooksGit.vue'
	export default {
		name:'MobileBooKList',
		components:{MobileBooksGit},
		data(){
			return{
				bannerlist:[]
			}
		},
		computed:{
			HotBanner(){
				this.bannerlist.sort((a1,a2)=>{
					return a2.hot-a1.hot
				})
				// forEach/for...in/for...of:都是可以再需要限制输出的数据数量模块使用
				//map 基本确定不会更改数组的长度，只不过数据的内容发生格式化改变
				let arr = [];
				this.bannerlist.map((item,i)=>{
					if(i<4){
						arr.push(item);
					}
				})
				return arr;
			}
		},
		mounted() {
			this.$get('/api/public/findHot/1/5').then((resp)=>{
				this.bannerlist = resp.data.data;
				console.log(this.bannerlist)
			})
		}
	}
</script>

<style scoped>
	  .booklist{
		  width: 100%;
		  background-color: #f5d5a0;
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  right: 0;
		  left: 0;
	  }
	  .booklist .banner{
		  width: 100%;
		  height: 9rem;
		  background-color: orange;
		  margin-top: 56px;
	  }
	  .booklist .banner img{
		  width: 100%;
		  height: 100%;
	  }
	  /* 穿刺 css用于修改固定组件样式的操作 */
	 .booklist .banner  .el-carousel /deep/ .el-carousel__button{
		  height: 5px !important;
	  }
	  .booklist .banner  .el-carousel /deep/ .is-active .el-carousel__button{
		  background-color: #0874fe !important;
	  }
</style>
